<div class="container" data-ng-controller="animCtrl as actrl">
    <div class="block-header">
        <h2>Pure CSS3 Animations</h2>

        <ul class="actions">
            <li>
                <a href="">
                    <i class="zmdi zmdi-trending-up"></i>
                </a>
            </li>
            <li>
                <a href="">
                    <i class="zmdi zmdi-check-all"></i>
                </a>
            </li>
            <li class="dropdown" uib-dropdown>
                <a href="" uib-dropdown-toggle>
                    <i class="zmdi zmdi-more-vert"></i>
                </a>

                <ul class="dropdown-menu dropdown-menu-right">
                    <li>
                        <a href="">Refresh</a>
                    </li>
                    <li>
                        <a href="">Manage Widgets</a>
                    </li>
                    <li>
                        <a href="">Widgets Settings</a>
                    </li>
                </ul>
            </li>
        </ul>

    </div>

    <div class="row">
        <div class="col-md-4 col-sm-6">
            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Attention Seekers <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/1.png" alt="" ng-class="actrl.ca" class="animated" id="attentionSeeker">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.attentionSeekers">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Flippers <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/6.png" alt="" ng-class="actrl.ca" class="animated" id="flippers">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.flippers">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Light Speed <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/7.png" alt="" ng-class="actrl.ca" class="animated" id="lightSpeed">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.lightSpeed">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Specials <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/1.png" alt="" ng-class="actrl.ca" class="animated" id="special">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.special">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 col-sm-6">
            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Bouncing Entrances <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/2.png" alt="" ng-class="actrl.ca" class="animated" id="bouncingEntrance">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.bouncingEntrance">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Bouncing Exits <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/3.png" alt="" ng-class="actrl.ca" class="animated" id="bouncingExits">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.bouncingExits">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Rotating Entrances <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/8.png" alt="" ng-class="actrl.ca" class="animated" id="rotatingEntrances">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.rotatingEntrances">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Rotating Exits <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/9.png" alt="" ng-class="actrl.ca" class="animated" id="rotatingExits">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.rotatingExits">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>



        <div class="col-md-4 col-sm-6">
            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Fadeing Entrances <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/4.png" alt="" ng-class="actrl.ca" class="animated" id="fadeingEntrances">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.fadeingEntrances">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Fadeing Exits <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/5.png" alt="" ng-class="actrl.ca" class="animated" id="fadeingExits">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.fadeingExits">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Zoom Entrances <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/4.png" alt="" ng-class="actrl.ca" class="animated" id="zoomEntrances">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.zoomEntrances">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card animation-demo">
                <div class="card-header">
                    <h2>Zoom Exits <small>Click on the buttons below to start the animation</small></h2>
                </div>

                <div class="card-body card-padding">
                    <img src="img/headers/sm/3.png" alt="" ng-class="actrl.ca" class="animated" id="zoomExits">

                    <div class="row">
                        <div class="col-xs-6" ng-repeat="w in actrl.zoomExits">
                            <button ng-click="actrl.setAnimation(w.animation, w.target)" class="btn bgm-cyan">{{ w.animation }}</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
